<template>
  <div class="payment">
    <van-nav-bar
      title="支付"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />
    <van-cell-group class="payment_group">
      <van-cell title="订单编号" :value="order.id" />
      <van-cell title="实付金额"><span class="red">{{ order.total_price | yuan}}</span></van-cell>
    </van-cell-group>

    <div class="pay_way_group">
      <div class="pay_way_title">选择支付方式</div>
      <van-radio-group v-model="payWay">
        <van-cell-group>
          <van-cell>
            <van-radio name="wx">
              <img src="../../assets/images/payment/wx_pay.png" alt="微信支付" width="113" height="23">
            </van-radio>
          </van-cell>
          <van-cell>
            <van-radio name="ali">
              <img src="../../assets/images/payment/ali_pay.png" alt="支付宝" width="82" height="29">
            </van-radio>
          </van-cell>
        </van-cell-group>
      </van-radio-group>
    </div>

    <van-button class="pay_submit" @click="paySubmit" :loading="isSubmit" type="primary"  bottomAction>支付</van-button>
  </div>
</template>

<script>
import { Radio, RadioGroup, CellGroup, Cell, Button, NavBar, Toast } from 'vant'

export default {
  name: 'payment',
  components: {
    [Button.name]: Button,
    [Radio.name]: Radio,
    [RadioGroup.name]: RadioGroup,
    [CellGroup.name]: CellGroup,
    [Cell.name]: Cell,
    [NavBar.name]: NavBar
  },
  data () {
    return {
      order: { order_details: [] },
      isSubmit: false,
      payWay: 'wx'
    }
  },
  async created () {
    const id = this.$route.params.id || null
    if (id !== null) {
      const order = await this.getOrder(id)
      if (order === null || order.state !== 0) {
        Toast('找不到该资源')
        this.$router.replace({ name: 'home' })
      }
    } else {
      Toast('找不到该资源')
      this.$router.replace({ name: 'home' })
    }
  },
  methods: {
    async getOrder (id) {
      const { data } = await this.$api.order.orderDetail(id)
      if (data.code !== 200) {
        Toast(data.desc)
        return null
      } else {
        this.order = data.data
        console.log(this.order)
        console.log('address-confirm' + this.order.address)
        console.log('id-confirm' + this.order.id)
        return this.order
      }
    },
    onClickLeft () {
      this.$router.go(-1)
    },
    async paySubmit () {
      const { data } = await this.$api.order.orderPayment({ order_id: this.order.id, state: 1 })
      if (data.code === 200) {
        this.$router.push({
          name: 'payment-result',
          params: {
            status: 'success'
          }
        })
      } else {
        Toast('订单支付失败')
      }
    }
  }
}
</script>

<style lang="less" scoped>
  .payment_group {
    margin-bottom: 10px;
  }
  .time_down {
    background-color: #fffeec;
    padding: 10px 15px;
  }
  .pay_submit {
    position: fixed;
    bottom: 0;
    width: 100%;
  }
  .pay_way_group img {
    vertical-align: middle;
  }
  .pay_way_title {
    padding: 15px;
    background-color: #fff;
  }
</style>
